Vue学习（一）-----组件

组件的注册以及父子组件之间传递参数

接触vue实践不短了，却总是磕磕碰碰，没有一个系统的概念，现在写几篇文章，记录一下学习的心得。

组件的注册：

下面是vue 官网提供的注册案例 ：

全局注册：

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

局部注册：

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

全局组件

在实际开发的过程中，使用vue-cli脚手架搭建项目之后,可以按照下面的方式注册： 全局通用的组件，可以在components文件夹下面建立一个public文件夹，专门放置通用的组件。

在public文件夹下的index.js 注册组件如下图所示，这样做的目的是方便维护，当然也可以直接在main.js中将组件一个一个 import进去，然后在再用。

局部组件

直接在需要的页面中把组件import进来，然后注册，即可使用

组件之间传递参数

父对子传递

子组件通过props”告诉”父组件自己需要什么参数，父组件便给他传递什么参数

子对父传递

子对父传递需要利用事件传递参数，下图是自己YY出来的逻辑

dome如下：
子组件执行某方法，将参数通过自定义事件传递给父组件

父组件执行该自定义事件时调用某方法将子组件传递的参数获取到

参考资料：

Vue 爬坑之路（二）—— 组件之间的数据传递
vue中各组件之间传递数据的方法示例
关于子对子组件之间的传参，以及slot内容分发，之后的博文中再做讲解。